<script>
import { House, Menu, Setting,KnifeFork,Calendar,Position,School,Football,OfficeBuilding,Van,Notebook,Picture,Iphone } from '@element-plus/icons-vue';

export default {
  methods: {
    navigateTo(href) {
      // 如果是外部链接，则使用window.open打开新窗口
      if (href.startsWith('http')) {
        window.open(href);
      } else {
        // 假设使用Vue Router进行内部导航
        this.$router.push(href);
      }
    },
    handleMouseEnter(index) {
      this.hoveredIndex = index;
    },
    handleMouseLeave() {
      this.hoveredIndex = -1;
    },

  },
  data() {
    return {
      hoveredIndex: -1, // 初始值为-1，表示没有卡片被悬停

      cards: [
        // 示例卡片数据
        {
          icon: School,
          title: '校园新闻',
          content: '最新的校园活动与新闻资讯',
          href:"https://www.kmust.edu.cn/index.htm"

        },
        {
          title: '学校食堂',
          icon: KnifeFork,
          content: '学校特色美食',
          href:"https://map.baidu.com/search/%E6%98%86%E6%98%8E%E7%90%86%E5%B7%A5%E5%A4%A7%E5%AD%A6-%E6%80%A1%E5%9B%AD%E9%A3%9F%E5%A0%82/@11450417.785,2840640.4,19z?querytype=s&da_src=shareurl&wd=%E6%98%86%E6%98%8E%E7%90%86%E5%B7%A5%E5%A4%A7%E5%AD%A6-%E6%80%A1%E5%9B%AD%E9%A3%9F%E5%A0%82&c=104&src=0&wd2=%E6%98%86%E6%98%8E%E5%B8%82%E5%91%88%E8%B4%A1%E5%8C%BA&pn=0&sug=1&l=13&b=(11411354,2857603;11460506,2880451)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=3757d058d0cf5a98d8d891a5&device_ratio=2"
        },
        {
          title: '校历',
          icon: Calendar,
          content: '课程与节假日安排',
          href:"https://jwc.kmust.edu.cn/info/1057/2629.htm"
        },
        {
          title: '校园地图',
          icon: Position,
          content: '了解教室与办公楼等的位置',
          href: "http://xnxy.kust.edu.cn/tour/d41670a2e0c71d8c"
        },
        {
          title: '健身',
          icon: Football,
          content: '校内外健身房信息与健身计划',
          href: "https://map.baidu.com/search/%E6%98%86%E6%98%8E%E7%90%86%E5%B7%A5%E5%A4%A7%E5%AD%A6%E5%81%A5%E8%BA%AB%E6%88%BF/@11439602.64,2853273.91,12z?querytype=s&da_src=shareurl&wd=%E6%98%86%E6%98%8E%E7%90%86%E5%B7%A5%E5%A4%A7%E5%AD%A6%E5%81%A5%E8%BA%AB%E6%88%BF&c=104&src=0&pn=0&sug=0&l=12&b=(11391115.484602887,2835373.2827075813;11468133.352617327,2871174.5572924186)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2"
        },
        {
          title: '学校概况',
          icon: OfficeBuilding,
          content: '校史与学校建设与发展背景',
          href:"https://www.kmust.edu.cn/xxgk/xxjj.htm"
        },
        {
          title: '课表',
          icon: Notebook,
          content: '来查看你的课程与考试安排吧',
          href: "http://cityjw.kust.edu.cn/integration/login?refer=http://cityjw.kust.edu.cn/integration/for-std/course-table"
        },
        {
          title: '校园风光',
          icon: Picture,
          content: '这里有校园美图哦，快来看看吧',
          href: "https://www.kmust.edu.cn/info/1020/17379.htm"
        },
        {
          title: '学生社区',
          icon: House,
          content: '一站式学生社区风彩展示',
          href:"https://sq.kmust.edu.cn/"
        },
        {
          title: '校车',
          icon: Van,
          content: '查看校车路线与站点',
          href: "https://hbzx.kmust.edu.cn/info/1083/1138.htm"

        },
        // 重复以下结构以创建剩余的卡片
        // ...
      ],
    };
  },
};
</script>
<script setup>
import {loadingBar} from "../HomeView_N.vue"
import {onMounted} from "vue";
onMounted(() => {
  loadingBar.finish();
})
</script>

<template>
  <div style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5">
    <img src="/background.webp">
  </div>
  <n-grid :x-gap="12" :y-gap="8" :cols="4">
    <n-grid-item v-for="(item, index) in cards" :key="index" @mouseover="handleMouseEnter(index)" @mouseout="handleMouseLeave">
      <n-card class="card-item" @click="navigateTo(item.href)">
      <n-card class="card-item">
        <template #header>
          <!--                  <el-avatar :size="40" :src="item.avatarUrl" />-->
          <div class="card-header-wrapper">
            <el-icon><component :is="item.icon"></component></el-icon>
            <div class="card-title">{{ item.title }}</div>
          </div>
        </template>
        <div class="card-content">
          <div class="card-text">{{ item.content }}</div>
        </div>
      </n-card>
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<style scoped>
body {
  margin: 0;
}
.flex-grow {
  flex-grow: 1;
}

.card-item {
  margin-bottom: 20px;
}

.card-title {
  display: inline-block;
  vertical-align: middle;
  margin-left: 50px;
}

.card-content {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.card-text {
  margin-left: 30px;
  text-align: center;
}
.card-header-wrapper {
  display: flex;
  align-items: center; /* 使图标和标题垂直居中对齐 */
  gap: 10px; /* 图标和标题之间的间距，按需调整 */
}

.card-item {
  transition: transform 0.3s; /* 添加过渡动画 */
}
.card-item:hover, /* 或者使用v-bind:class动态绑定，但这里直接用:hover更简洁 */
.card-item[data-hovered] {
  transform: scale(1.05); /* 鼠标悬停时卡片放大1.05倍 */
}

</style>